<template>
  <div>
    <el-form ref="searchUser" :inline="true" :model="reactiveData.userS" class="demo-form-inline">
      <el-form-item label="用户名称" prop="loginName">
        <el-input v-model.string="reactiveData.userS.loginName" autocomplete="off" placeholder="用户名" type="text" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="reactiveData.userS.phone" autocomplete="off" placeholder="手机号" type="text" />
      </el-form-item>
      <el-form-item label="用户状态" prop="isStop">
        <el-select v-model="reactiveData.userS.stop" class="m-2" placeholder="用户状态" size="large">
          <el-option v-for="item in reactiveData.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchUsersubmit()">搜索</el-button>
        <el-button type="primary" @click="reset(searchUser)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加用户
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="reactiveData.tableData" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (reactiveData.userS.page - 1) * reactiveData.userS.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="loginName" width="180" />
      <el-table-column align="center" header-align="center" label="手机号" prop="phone" width="180" />
      <el-table-column align="center" header-align="center" label="邮箱" prop="email" />
      <el-table-column align="center" header-align="center" label="账号状态">
        <template #default="scope">
          <el-switch v-model="scope.row.stop" :active-value="false" :inactive-value="true" active-text="是" inactive-text="否" inline-prompt @change="chengStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="创建时间" prop="createTime" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="edit(scope.row)">编辑 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deleted(scope.row)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="reactiveData.dialogFormVisible" destroy-on-close title="添加用户" @close="resetForm(addUser)">
    <el-form ref="addUser" :model="reactiveData.editInfoData" :rules="reactiveData.addRules" label-width="100px">
      <el-row class="row-bg">
        <el-col :span="12">
          <el-form-item label="用户名：" prop="loginName">
            <el-input v-model="reactiveData.editInfoData.loginName" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称：" prop="nickName">
            <el-input v-model="reactiveData.editInfoData.nickName" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="reactiveData.editInfoData.phone" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="reactiveData.editInfoData.sex">
              <el-radio-button label="0">男</el-radio-button>
              <el-radio-button label="1">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="reactiveData.editInfoData.email" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司" prop="companyId">
            <el-select v-model="reactiveData.editInfoData.companyId" placeholder="请选择公司" @change="getDept">
              <el-option v-for="item in reactiveData.selectCompanyData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门：" prop="email">
            <el-cascader v-model="reactiveData.editInfoData.deptId" :getCheckedNodes="true" :options="reactiveData.selectDeptTree" :props="reactiveData.props" clearable @change="getJob" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位：" prop="email">
            <el-select v-model="reactiveData.editInfoData.jobId" placeholder="请选择岗位">
              <el-option v-for="item in reactiveData.jobSelect" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色：" prop="roleList">
            <el-select v-model="reactiveData.editInfoData.roleIdList" multiple placeholder="选择角色">
              <el-option v-for="item in reactiveData.roleAll" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="头像：" prop="avatar">
            <ImgUpload v-model:file_url="reactiveData.editInfoData.avatar" :file_max="1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="saveUserSub(addUser)">保存 </el-button>
            <el-button @click="reactiveData.dialogFormVisible = false">取消 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <Page :pageData="reactiveData.userS" @selectPage="searchUsersubmit"></Page>
</template>

<script lang="ts" setup>
import { bindRoleList, deleteUser, detailUser, editUser, getJobSelect, pageUser, saveUser, selectCompany, selectDeptBox } from '@/api/admin'
import { operateUserClass, userDataInfo, userInfo } from '@/page/types/admin/user'
import { Delete } from '@element-plus/icons-vue'
import { ElMessageBox, FormInstance, UploadProps } from 'element-plus/es'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { baseListInfo } from '@/page/types/base/baseList'
import { selectDeptInfo } from '@/page/types/admin/dept'
import Page from '@/components/Page.vue'
import ImgUpload from '@/components/ImgsUpload.vue'
const reactiveData = reactive(new operateUserClass())
const addUser = ref<FormInstance>()
const searchUser = ref<FormInstance>()
const searchUsersubmit = () => {
  pageUser(reactiveData.userS).then(res => {
    const resultData = res.data.records as userInfo[]
    reactiveData.tableData = resultData
    reactiveData.userS.page = res.data.current
    reactiveData.userS.size = res.data.size
    reactiveData.userS.total = res.data.total
  })
}
onMounted(() => {
  searchUsersubmit()
})

const opendialog = () => {
  getAllRole()
  reactiveData.dialogFormVisible = true
  selectCompany(null).then(res => {
    reactiveData.selectCompanyData = res.data as baseListInfo[]
  })
}
const reset = (reset: FormInstance | undefined) => {
  if (!reset) {
    return
  }
  reset.resetFields()
  searchUsersubmit()
}
const resetForm = (addUser: FormInstance | undefined) => {
  if (!addUser) {
    return
  }
  addUser.resetFields()
}
const getAllRole = () => {
  bindRoleList().then(res => {
    const roleList = res.data as baseListInfo[]
    reactiveData.roleAll = roleList
  })
}
const saveUserSub = (addUser: FormInstance | undefined) => {
  if (!addUser) return
  addUser.validate((validate: boolean) => {
    if (validate) {
      if (reactiveData.editInfoData.roleIdList && reactiveData.editInfoData.roleIdList.length > 0) {
        reactiveData.editInfoData.roleList = []
        reactiveData.editInfoData.roleIdList.forEach(rests => {
          reactiveData.editInfoData.roleList.push({
            id: rests,
            name: null
          })
        })
      }
      if (reactiveData.editInfoData.id) {
        editUser(reactiveData.editInfoData).then(res => {
          ElMessage({
            message: '更新用户信息成功',
            type: 'success'
          })
          reactiveData.dialogFormVisible = false
          searchUsersubmit()
        })
      } else {
        saveUser(reactiveData.editInfoData).then(res => {
          ElMessage({
            message: '添加用户信息成功',
            type: 'success'
          })
          reactiveData.dialogFormVisible = false
          searchUsersubmit()
        })
      }
    }
  })
}
const chengStatus = (row: userDataInfo) => {
  const data = row
  if (row.type && row.type.name) {
    data.type = row.type.name
  }
  editUser(data).then(res => {
    ElMessage({
      message: '更新用户状态成功',
      type: 'success'
    })
    searchUsersubmit()
  })
}
const edit = (row: userInfo) => {
  getAllRole()
  getDept(null)
  getJob(null)
  detailUser(row.id).then(res => {
    reactiveData.editInfoData = res.data
    if (res.data.type) {
      reactiveData.editInfoData.type = res.data.type.name
    }
    reactiveData.dialogFormVisible = true
    if (res.data.company && res.data.company.id) {
      reactiveData.editInfoData.companyId = res.data.company.id
    }
    if (res.data.dept && res.data.dept.id) {
      reactiveData.editInfoData.deptId = res.data.dept.id
    }
    if (res.data.job && res.data.job.id) {
      reactiveData.editInfoData.jobId = res.data.job.id
    }
    if (res.data.roleList) {
      reactiveData.editInfoData.roleIdList = []
      res.data.roleList.forEach((rets: baseListInfo) => {
        if (rets.id) {
          const datas = rets.id as number
          reactiveData.editInfoData.roleIdList.push(datas)
        }
      })
    }
  })
  selectCompany(null).then(res => {
    const data = res.data as baseListInfo[]
    reactiveData.selectCompanyData = data
  })
}
const deleted = (row: userInfo) => {
  ElMessageBox.confirm('是否要删除' + row.loginName, '删除', {
    type: 'warning',
    icon: markRaw(Delete)
  })
    .then(res => {
      deleteUser(row.id).then(() => {
        ElMessage({
          message: '删除用户成功',
          type: 'success'
        })
        searchUsersubmit()
      })
    })
    .catch(() => {})
}
const getDept = (val: any) => {
  reactiveData.selectDeptTree = []
  reactiveData.editInfoData.dept = null
  selectDeptBox({ companyId: val }).then(res => {
    const data = res.data as selectDeptInfo[]
    if (data) {
      reactiveData.selectDeptTree = data
    }
  })
}
const getJob = (val: any) => {
  reactiveData.jobSelect = [] as baseListInfo[]
  getJobSelect(null, val).then(res => {
    reactiveData.jobSelect = res.data as baseListInfo[]
  })
}
</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.pagination-block {
  position: relative;

  .el-pagination {
    margin-top: 20px;
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
